<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>jQuery Mobile Bootstrap Theme</title>
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
		<link rel="stylesheet" href="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.min.css" />
		<link rel="stylesheet" href="../themes/Bootstrap.css" />
		<link rel="stylesheet" href="../themes/jquery.mobile.icons.min.css" />
		<link rel="stylesheet" href="../stylesheets/style.css" />
		<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<script type="text/javascript" src="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.core.min.js"></script>
    	<script type="text/javascript" src="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.mode.calbox.min.js"></script>
    	<script type="text/javascript" src="../js/jquery.blockUI.js"></script>
    	<script type="text/javascript">
    	
    		var data = {};
    		var investor = "";
			
			$(document).ready(function(){
		    	
		   		initData();
				getList();
			
			});
			
			function initData() {
				
				investor = $("#investor_type").val();
				data.type = 'supply';
				data.stock_cd =	$("#stock_cd").val(); 
				data.investor_type = investor; 
				$('#selAgent').val(investor).selectmenu('refresh');
			}
			
			
			function changAgent() {
				
				data = {};
				investor = $("#selAgent").val();
				data.type = 'supply';
				data.stock_cd =	$("#stock_cd").val(); 
				data.investor_type = investor; 
				
				getList();
			}
			
			function getList() {
			
				$.ajax({
				type: 'POST',
				url: '/search',
				data: JSON.stringify(data),
				dataType : "json", 
				contentType: 'application/json',
				beforeSend: function () {
			            $.blockUI({ 
			                message: '<img src="../themes/images/ajax-loader.gif" width="50" height="50"/>',
			                css: { 
			                    top:  ($(window).height() - 100) /2 + 'px', 
			                    left: ($(window).width() - 100) /2 + 'px',
			                    color:      '',
			                    border:     '',
			                    backgroundColor:'',                     
			                    width: '100px' 
			                }                
			                
			            }); 
			     },
				success : function(data){ // 성공시 data값.
				
					$.unblockUI(); 
					var newRows = '';
					
					if($.isArray(data) && data.length > 0  ){ //배열확인
						
						$.each(data,function(i){//loop
							newRows += '<tr>';
							newRows += '<td align="left">'+data[i].stock_date+'</td>';
             				newRows += '<td align="right">'+data[i].price+'원</td>';
             				// newRows += '<td align="right">'+data[i].total_sum+'</td>';
             				//  newRows += '<td align="right">'+data[i].min_sum+'</td>';
             				newRows += '<td align="right">'+data[i].volum+'</td>';
             				newRows += '<td align="right">'+data[i].max_sum+'</td>';
             				newRows += '<td align="right">'+data[i].val+'%</td>';
             				newRows += '</tr>';
						});
						
					} else {
						   newRows += '<tr>';
						   newRows += '<td colspan="5">데이타가 없습니다.</td>';
						   newRows += '</tr>';
					}
					
					$('#mytable tbody').empty()
							 .append( newRows )
							 .closest( "#mytable" )
		           			 .table("refresh" )
		                	 .trigger( "create" );
					
				},
			    error : function(request, status, error) {
			    
				 //통신 에러 발생시 처리
					alert("code : " + request.status + "\r\nmessage : " + request.reponseText +" \r\n error : " + error);
					$.unblockUI(); 
					}
				});
			}
			
			function goDetail(investor_type,investor){
				$("#investor_type").val(investor_type);
				$("#investor").val(investor);
				$("#form").submit();
			}
		
		</script>
    
   </head>
	<body>
		<div data-role="page" data-theme="a">
			<div data-role="header" data-position="inline">
				<a href="/<%=path%>" class="ui-btn-left" data-icon="back" target="_self">Back</a>
					<h1>투자자별 보유비중</h1>
				<a href="/"  class="ui-btn-right" data-icon="home" target="_self">Home</a>
			</div>
			<div data-role="content" data-theme="a">
				
				<div id="stockInfo">
					<h1>
						<P><center><%=stock_nm%></center></P>
					</h1>
				<ul>
					<li> 종가 : <%=closing_price%> 원</li>
					<li> 거래량 : <%=trading_volum%> 주</li>
					<li>
				<% if(contrast == '2') { %>
               		전일대비 : <em class='up'><img src="/images/bigup.gif"/> <%=contvalue%></em> (<em class='up'><%=fluctuation_rate%></em>%)
				<% } else if(contrast == '1') { %>
					전일대비 : <em class='up'><img src="/images/up.gif" /> <%=contvalue%></em> (<em class='up'><%=fluctuation_rate%></em>%)
				<% } else if(contrast == '0') { %>
					전일대비 : <em><img  src="/images/none.gif" /> 0</em> (<em>0</em>%)
				<% } else if(contrast == '-1') { %>
					전일대비 : <em class='down'><img src="/images/down.gif" /> <%=contvalue%></em> (<em class='down'><%=fluctuation_rate%></em>%)
				<% } else if(contrast == '-2') { %>
					전일대비 : <em class='down'><img src="/images/bigdown.gif" /> <%=contvalue%></em> (<em class='down'><%=fluctuation_rate%></em>%)
				<% } %>
					</li>	
					<li> 총발행 주식 : <%=listed_stocks%> 주</li>
					<li> 기준일  : <%=s_date%></li>
				</ul>
			</div>
			<div >
				<table id="lead" class="itable">
						<tr>
							<td colspan="6" style="font-size: 16px;background-color:#B4B4B4">투자자별 선도 비중</td>
						</tr>
						<tr>
							<td>개인</td>
							<td><%=ld100%>%</td>
							<td>금융투자</td>
							<td><%=ld201%>%</td>
							<td>보험</td>
							<td><%=ld202%>%</td>
						</tr>
						<tr>
							<td>투신</td>
							<td><%=ld203%>%</td>
							<td>사모</td>
							<td><%=ld204%>%</td>
							<td>은행</td>
							<td><%=ld205%>%</td>
						</tr>
						<tr>
							<td>연기금</td>
							<td><%=ld206%>%</td>
							<td>기타금융</td>
							<td><%=ld207%>%</td>
							<td>국가</td>
							<td><%=ld208%>%</td>
						</tr>
						<tr>
							<td>기타법인</td>
							<td><%=ld209%>%</td>
							<td>외국인</td>
							<td><%=ld300%>%</td>
							<td>내국인</td>
							<td><%=ld301%>%</td>
						</tr>
				</table>
			</div>
		
			<select name="selAgent" id="selAgent" data-theme="a" data-icon="carat-d" data-inline="true" data-native-menu="false" onchange="changAgent();">
				<option value="A001000">개인</option>
				<option value="A002001">금융투자</option>
				<option value="A002002">보험</option>
				<option value="A002003">투신</option>
				<option value="A002004">사모</option>
				<option value="A002005">은행</option>
				<option value="A002006">연기금</option>
				<option value="A002007">기타금융</option>
				<option value="A002008">국가</option>
				<option value="A002009">기타법인</option>
				<option value="A003000">외국인</option>
				<option value="A003001">내국인</option>
			</select>
				
          	<table id="mytable" data-role="table" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="a" data-column-btn-text="항목 선택" data-column-popup-theme="a">
	         <thead>
	           <tr class="ui-bar-a" >
	             <th>날짜</th>
	             <th data-priority="3">현재가</th>
	             <th data-priority="4">매집수량</th>
	             <th data-priority="5">매집고점</th>
	             <th data-priority="1"><abbr title="분산비율">분산비율</abbr></th>
	           </tr>
	         </thead>
	         <tbody>
	         </tbody>
	        </table>
			</div>
	      	<div data-role="footer" data-theme="a">
				<center> Copyright © 2015 UpDiosSystems Ins. </center> 
			</div> 
		</div>
		
		<input type="hidden" id="stock_cd" name="stock_cd" value="<%= stock_cd %>" />
		<input type="hidden" id="investor_type" name="investor_type" value="<%= investor_type %>" />
	</body>
</html>